import React from 'react';
import ReactDom from 'react-dom';
import Button from 'views/component/button/button';
import './riskBag.scss';
import { api } from 'js/api/api';
import playerStore from 'js/store/playerStore';
import iconData from 'js/data/iconData';


class Main extends React.Component {
    constructor() {
        super()
        this.state = {
            bag: null,
            selectPartnerId: null,
            selectBagIndexId: null,
            selectPartner: null,
            showType: 1
        }
    }
    componentDidMount() {
        this.getBag();
    }
    getBag = () => {
        api('getRiskBag', (err, data) => {
            this.setState({ bag: data })
        });
    }
    close = () => {
        if (this.props.beforeClose) {
            this.props.beforeClose();
        }
        this.props.close();
    }
    onClick = (indexId, partner) => {
        this.setState({ selectPartnerId: indexId, selectPartner: partner })
    }
    bagClick = (index) => {
        this.setState({ selectBagIndexId: index })
    }
    getItemInfo = (selectBagIndexId, ) => {
        let itemInfo = null, handleNode = null, contentNode = [];
        let propName = window.propName;
        let player = playerStore.player;
        if (selectBagIndexId !== null) {
            let item;
            item = this.state.bag.items[selectBagIndexId];
            let templateId = item.templateId;
            let totalConfig = window.totalConfig;
            if (parseInt(templateId / 10000) === 51) {
                //类型1武器2头3胸4手5脚6戒指7耳环
                let equimentText = { 1: '武器', 2: '头部', 3: '胸部', 4: '手部', 5: '脚部', 6: '戒指', 7: '耳环' };
                let weaponPartText = { 1: '双手', 2: '单手', 3: '副手' };
                let attriText = {
                    maxHp: '生命', attack: '攻击力', pdef: '物防', ldef: '法防', crit: '暴击', critHurt: '暴伤', toughness: '韧性',
                    guard: '守护', speed: '速度', recover: '回血', con: '暗', str: '火', will: '水', sta: '暗', agile: '雷',
                }
                let weaponTypeText = {
                    1: '剑', 2: '斧', 3: '刀', 4: '法杖', 5: '权杖', 6: '弓', 7: '法书', 8: '盾', 9: '匕首'
                };
                //weaponPart 武器部位1双手2单手2副手
                //weaponType 武器类型1剑2斧3刀4法杖5权杖6弓7法书8盾9匕首

                let equipmentConfig = totalConfig.equipment[templateId];
                if (equipmentConfig.type === 1) {
                    contentNode.push(<div key={1}>武器类型:{weaponTypeText[equipmentConfig.weaponType]}</div>)
                    contentNode.push(<div key={2}>武器部位:{weaponPartText[equipmentConfig.weaponPart]}</div>)
                } else {
                    contentNode.push(<div key={3}>装备部位:{equimentText[equipmentConfig.type]}</div>)
                }
                let j = 4;
                if (item.mainAttri) {
                    for (let [attri, value] of Object.entries(item.mainAttri)) {
                        contentNode.push(<div key={j}>{attriText[attri]}:{value}</div>)
                        j += 1;
                    }
                }
                if (selectEquimentType) {
                    handleNode = <div className="item-button" onClick={() => { this.equipUnload(selectEquimentType) }}>卸下</div>
                } else if (equipmentConfig.weaponPart && equipmentConfig.weaponPart === 2) {
                    handleNode = <div>
                        <div className="item-button" onClick={() => { this.equiment(selectBagIndexId, 1) }}>装备主手</div>
                        <div className="item-button" onClick={() => { this.equiment(selectBagIndexId, 2) }}>装备副手</div>
                    </div>
                } else {
                    handleNode = <div className="item-button" onClick={() => { this.equiment(selectBagIndexId) }}>装备</div>
                }
            }
            if (item) {
                itemInfo = <div className="itemInfo flex-col">
                    <div className="name">{propName[item.templateId]}</div>
                    <div className="content flex-g-1">{contentNode}</div>
                    <div className="handle flex-center">{handleNode}</div>
                </div>
            }
        }
        return itemInfo;
    }
    close = () => {
        this.props.close();
    }
    extractToWareHouse=()=>{
        api('extractToWareHouse', (err, data) => {
            this.setState({ })
        });
    }
    extractToBag=()=>{
        api('extractToBag', (err, data) => {
            this.setState({})
        });
    }
    render() {
        let { bag, selectPartnerId, selectPartner, selectBagIndexId, showType } = this.state;
        let node = [];
        let propName = window.propName;
        let player = window.player;
        let itemInfo = null;

        if (bag) {
            node = bag.items.map((item, i) => {
                if (item) {
                    return <div className={"item flex-vcenter" + (selectBagIndexId === i ? ' active' : '')}
                        key={i} onClick={() => { this.bagClick(i) }}>
                        {propName[item.templateId]}
                        <div className="bag-item-number">{item.stack}</div>
                    </div>
                } else {
                    return <div className="item" key={i}></div>
                }
            });
        }
        return <div id="riskBag">
            <div className="bag flex-col">
                <div className="flex-g-1  flex wrap  bag-content">{node}</div>
                <div className="line"></div>
                <div className="bag-bottom">
                    <div className="lineItem2">
                        <div className="flex-vcenter lineItem2">
                            <div className="bag-button" onClick={this.extractToBag}>全部提取到背包</div>
                        </div>
                        {/* <div className="bag-button" onClick={this.discard}>丢弃</div> */}
                        <div className="bag-button" onClick={this.close}>关闭</div>
                    </div>
                </div>
            </div>
        </div>
    }
}

export default Main;